<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-11-19 11:34:40
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-01 11:11:02
 * @FilePath: /XMate-h5/src/views/myXmate/components/businessOpportListHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-row justify-between items-center h-[70px] bg-transparent">
    <van-search
      ref="searchInput"
      v-model="cp_searchValue"
      :show-action="isSearching"
      background="transparent"
      :placeholder="searchPlaceholder"
      @search="doSearch"
      @cancel="onCancel"
      @focus="onSearchFocus"
      @blur="onSearchBlur"
      @clear="onClear"
      class="flex-grow"
      shape="round"
      border
    />
    <van-dropdown-menu v-if="!isSearching" class="filter-menu pr-2" active-color="#436BFF">
      <van-dropdown-item
        v-if="enableDrpt"
        v-model="currentDrpt"
        :options="reportTypeOptions"
        :title="drptTitle"
        @open="handleOpenDrptFilter"
      />
      <van-dropdown-item
        title="排序"
        v-model="orderType"
        :options="orderTypeOptions"
        @change="handleOrderTypeChange"
      />
      <van-dropdown-item title="筛选" @open="handleOpenFilter" />
    </van-dropdown-menu>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, computed } from "vue";
const emits = defineEmits([
  "search",
  "filter",
  "drptFilter",
  "update:searchValue",
  "orderTypeChange",
]);
const isSearching = ref(false);

const props = defineProps({
  enableDrpt: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  drptTitle: {
    type: String,
    default: () => {
      return "全部部门";
    },
  },
  searchPlaceholder: {
    type: String,
    default: () => {
      return "搜索";
    },
  },
  searchValue: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const currentDrpt = ref("");
const currentReportTypeText = ref("全部部门");
const reportTypeOptions = ref([
  { text: "华中大区", value: 0 },
  { text: "华中1大区", value: 1 },
  { text: "华中2大区", value: 2 },
]);

function handleOrderTypeChange(v) {
  orderType.value = v;
  emits("orderTypeChange", v);
}

const orderType = ref("meetCount");
const orderTypeOptions = ref([
  {
    text: "按创建时间",
    value: "created_time",
  },
  {
    text: "按风险个数",
    value: "riskCount",
  },
  {
    text: "按沟通次数",
    value: "meetCount",
    selected: true,
  },
  {
    text: "按待办个数",
    value: "todosCount",
  },
  {
    text: "按参会个数",
    value: "attendeeCount",
  },
  {
    text: "按提及竞品个数",
    value: "competitorCount",
  },
]);

// const cp_searchValue = computed({
//   get: () => props.searchValue.value,
//   set: val => {
//     emits("update:searchValue", val);
//   }
// });
const cp_searchValue = computed({
  get: () => props.searchValue,
  set: (val) => {
    emits("update:searchValue", val);
  },
});

const searchInput = ref(null);
const enableSearch = ref(false);

function handleOpenFilter() {
  emits("filter");
}

function handleOpenDrptFilter() {
  emits("drptFilter");
}

function onClear() {
  cp_searchValue.value = "";
  doSearch("");
}

function doSearch() {
  emits("search", cp_searchValue.value);
}

function onCancel() {
  isSearching.value = false;
  enableSearch.value = false;
  doSearch("");
}

function onSearchFocus() {
  isSearching.value = true;
}

function onSearchBlur() {
  isSearching.value = false;
  enableSearch.value = false;
  doSearch("");
}
</script>

<style lang="less" scoped>
:deep(.van-dropdown-menu__bar) {
  height: 32px;
  background: transparent;
  box-shadow: none;
}

:deep(.van-dropdown-menu__item) {
  padding: 0 8px;
  min-width: 80px;

  .van-dropdown-menu__title {
    font-size: 14px;
    color: #333;

    &::after {
      border-color: transparent transparent #666 #666;
    }

    &--active {
      color: #436bff;
    }
  }
}

.van-search {
  flex-grow: 1;
}

/deep/ .van-search__content {
  border: 1px solid #e5e5e5;
  background-color: #ffffff;
  border-radius: 8px;
}

/deep/ .van-dropdown-menu__bar {
  gap: 8px;
  min-height: 38px;
}

/deep/ .van-dropdown-menu__item {
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  background-color: #ffffff;
}
</style>
